window.addEventListener("load", () => {
  // 1. 搜索框
  const BOXEL = document.querySelector(".box");
  const DO_IS_EL = document.querySelector(".doIs");
  const SEARCH_PHONE_EL = document.querySelector(".search_phone");
  const CANCEL_EL = document.querySelector(".cancel");
  const CHECK_EL = document.querySelector(".check");
  const KONG_EL = document.querySelector(".kong");
  const NO_EL = document.querySelector(".no");

  // 手机号正则
  const REG = /^[1-9]\d{10}$/;

  // 2. 接收返回数据phone
  function getQueryString(phone) {
    const REG = new RegExp("(^|&)" + phone + "=([^&]*)(&|$)", "i");
    const RESULT = window.location.search.substr(1).match(REG);
    return RESULT ? RESULT[2] : null;
  }

  // 回显
  const PHONE_NUMBER = decodeURIComponent(getQueryString("phone"));
  if (PHONE_NUMBER !== "null") {
    SEARCH_PHONE_EL.value = PHONE_NUMBER;
    DO_IS_EL.style.display = "block";
    getList();
  }

  // 1.1实时监听input输入显示操作
  SEARCH_PHONE_EL.addEventListener("input", () => (DO_IS_EL.style.display = "block"));

  // 1.2 input监听回车事件 限制输入 正确为11位正整数
  SEARCH_PHONE_EL.addEventListener("keydown", (e) => {
    e.keyCode == "13" ? (!REG.test(SEARCH_PHONE_EL.value) ? alert("请输入11位正整数") : getList()) : null;
  });

  // 1.3 点击清除Input所有内容
  CANCEL_EL.addEventListener("click", () => (SEARCH_PHONE_EL.value = ""));

  // 1.3.1  限制输入11位正整数手机号，否则弹出提示框
  // 1.3.2点击查询 发送请求 获取数据 有信息则显示
  CHECK_EL.addEventListener("click", () => {
    !REG.test(SEARCH_PHONE_EL.value) ? alert("请输入11位正整数") : getList();
  });

  async function getList() {
    try {
      const RES = await request({
        url: `/findUserLogisticsStatus/${SEARCH_PHONE_EL.value}`
      });

      // 2.查询到物流时
      document.querySelector(".content").remove();
      if (RES.data.length) {
        NO_EL.style.display = "none";
        KONG_EL.style.display = "none";
      } else {
        NO_EL.style.display = "none";
        KONG_EL.style.display = "block";
      }

      const CONTENT = document.createElement("article");
      CONTENT.classList = "content";
      BOXEL.appendChild(CONTENT);

      RES.data.forEach((item) => {
        const MESSAGE_ITEM = document.createElement("div");
        MESSAGE_ITEM.innerHTML = `
             <div class="item-h">
               <h4 class="goodsName">商品名称</h4>
               <h4 class="goodsNames">${item.productName}</h4>
               <h4 class="msg">${item.statusRemark}</h4>
             </div>
             <div class="item-b">
               <div>
                 <div class="buyer orderMsg">
                   <div class="buyer">收货人</div>
                   <div class="buyer_name">${item.consignee}</div>
                 </div>
                 <div class="phoneNumber orderMsg">
                   <div class="phone">手机号码</div>
                   <div class="phone_number">${item.phone}</div>
                 </div>
                 <div class="express orderMsg">
                   <div class="express">${item.company}</div>
                   <div class="express_number">${item.orderNumber}</div>
                   <div class="copy" data-order-number='${item.orderNumber}'>
                     <button><img src="images/copy.png" alt="" /></button>
                   </div>
                 </div>
               </div>
               <div class="detail"><a href="details.html?orderNumber=${item.orderNumber}">物流详情</a></div>
             </div>
           `;
        MESSAGE_ITEM.classList = "block message_item ";
        CONTENT.appendChild(MESSAGE_ITEM);
      });
    } catch {}
    // 2. 复制快递单号功能
    const COPYS = document.querySelectorAll(".copy");
    for (let i = 0; i < COPYS.length; i++) {
      COPYS[i].addEventListener("click", function () {
        const TEXT = this.getAttribute("data-order-number");
        const FLAG = copyText(TEXT);
        FLAG ? alert("复制成功") : alert("复制失败");
      });
    }
  }
});
